<template>
  <el-dialog title="清单编号" v-model="dialogVisible" width="80%">
    <el-form ref="formRef" :model="queryParams" label-width="110px" :inline="true">
      <el-form-item label="订单号" prop="orderNumber">
        <el-input
          @keyup.enter="getList"
          class="!w-220px"
          v-model="queryParams.orderNumber"
          placeholder=""
        />
      </el-form-item>
      <el-form-item label="产品编号" prop="productNumber">
        <el-input
          @keyup.enter="getList"
          class="!w-220px"
          v-model="queryParams.productNumber"
          placeholder=""
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input
          @keyup.enter="getList"
          class="!w-220px"
          v-model="queryParams.productName"
          placeholder=""
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" type="primary"> 搜索</el-button>
        <el-button @click="resetQuery"> 重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      v-loading="formLoading"
      ref="multipleTableRef"
      :data="list"
      height="400px"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="85" :selectable="handleSelectable" reserve-selection />
      <el-table-column
        type="index"
        label="序号"
        width="80"
        header-align="center"
        align="center"
        fixed="left"
      />
      <el-table-column
        v-for="item in tableTitle"
        :key="item.val"
        :label="item.label"
        header-align="left"
        align="left"
        :prop="item.val"
        :min-width="200"
      >
        <template #default="scope">
          <template v-if="item.val == 'dictOrderType'">
            {{ getDictLabel('market_order_type', scope.row.dictOrderType) }}
          </template>
          <template v-else>{{ scope.row[item.val] }}</template>
        </template>
      </el-table-column>
    </el-table>
    <div class="mb-10">
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
   const tableTitle = ref([
     {
       label: '清单编号',
       val: 'prepareNumber'
     },
     {
       label: '订单号',
       val: 'orderNumber'
     },
     {
       label: '订单类型',
       val: 'dictOrderType'
     },
     {
       label: '客户代码',
       val: 'customerCode'
     },
     {
       label: '客户名称',
       val: 'customerName'
     },
     {
       label: '产品编码',
       val: 'productNumber'
     },
     {
       label: '产品名称',
       val: 'productName'
     },
     {
       label: '产品规格',
       val: 'productStandard'
     },
     {
       label: '创建人',
       val: 'creatorName'
     },
     {
       label: '创建时间',
       val: 'createTime'
     }
   ])
   import request from '@/config/axios'
   import { getDictLabel } from '@/utils/dict'
   const dialogVisible = ref(false)

   const queryParams = reactive({
     pageNo: 1,
     pageSize: 20,
     orderNumber: null,
     productNumber: null,
     productName: null
   })
   // 记录选中
   const selectedRow = ref(null)
   // 最后确定选中
   const SelectionRes = ref()
   // 监听表格变化
   function handleSelectionChange(val) {
     if (val.length > 0) {
       selectedRow.value = val[0]
     } else {
       selectedRow.value = null
     }
   }
   // 是否可以选中该行
   function handleSelectable(row) {
     return selectedRow.value === null || selectedRow.value.id === row.id
   }
   const formRef = ref()
   const formLoading = ref(false)
   const total = ref(0) //部件总数
   const list = ref([]) //部件列表
   const multipleTableRef = ref()
   /** 重置按钮操作 */
   const resetQuery = () => {
     formRef.value.resetFields()
     getList()
   }

   /**打开弹窗
    * listUrl : 列表请求地址
    * data: 回显数据
    */
   const listUrl = ref('')
   const open = (url: string, data?: object) => {
     dialogVisible.value = true
     listUrl.value = url
     if (JSON.stringify(data) != '{}') {
      selectedRow.value = data
     }

     getList()
   }
   defineExpose({ open }) // 提供 open 方法，用于打开弹窗

   // 获取数据
   const getList = async () => {
     formLoading.value = true
     try {
       const res = await request.get({ url: listUrl.value, queryParams })
       res.list.map((item) => {
         item.isCheck = false
       })
       list.value = res.list
       if (selectedRow.value != null) {
         nextTick(() => {
          console.log(selectedRow.value)
           list.value.map((val) => {
             if (val['id'] === selectedRow.value.id) {
               multipleTableRef.value.toggleRowSelection(val, true)
             }
           })
         })
       }
       total.value = res.total
     } finally {
       formLoading.value = false
     }
   }

   const emit = defineEmits(['slectList'])
   // 确定
   const submitForm = () => {
      SelectionRes.value = selectedRow.value
     dialogVisible.value = false
     emit('slectList', SelectionRes.value)
     reset()
   }

   // 重置数据
   const reset = () => {
     multipleTableRef.value!.clearSelection()
     formRef.value.resetFields()
     SelectionRes.value = null
     selectedRow.value = null
   }
</script>
